<template>
  <div class="login-body">
    <div class="login-panel">
      <div class="login-title">登录</div>
      <el-form :model="fromData"
               :rules="rules"
               :data="fromData"
                ref="formDataRef">
        <el-form-item prop="account">
          <el-input placeholder="请输入账号" v-model="fromData.account" size="large">
            <template #prefix>
              <span class="iconfont icon-yonghu "></span>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input placeholder="请输入密码" v-model="fromData.password" size="large">
            <template #prefix>
              <span class="iconfont icon-mima "></span>
            </template></el-input>
        </el-form-item>
        <el-form-item prop="checkCode">
          <div class="check-code-panel">
            <el-input class="input-panel" placeholder="请输入验证码" v-model="fromData.checkCode" size="large"></el-input>
            <img class="check-code" :src="checkCodeUrl" @change="changeCheckCode">
          </div>
        </el-form-item>
      </el-form>
      <el-checkbox v-model="fromData.rememberMe" :label="true" style="margin: 0 0 20px 0">记住我</el-checkbox>
      <el-button type="primary" style="width: 100%" @click="login">登录</el-button>
    </div>
  </div>
</template>

<script setup>
import {reactive, ref} from 'vue'
import router from "@/router/index.js";
import globalVariables from "@/utils/globalVariables.js";

const checkCodeUrl = ""

const api = {
  checkCode: ""
}

// const checkCodeUrl = ref(api.checkCode)
//
// const  changeCheckCode = ()=>{
//   checkCodeUrl.value = api.checkCode + "?" + new Date().getTime()
// }`

/** 表单相关  */
const formDataRef = ref()
const fromData = reactive({
  checkCode: "2378",
  account: "123456",
  password: "123",
})

const rules = {
  account: [{
    required: true,
    message: "请输入用户名"
  }],
  password: [{
    required: true,
    message: "请输入密码"
  }],
  checkCode: [{
    required: true,
    message: "请输入验证码"
  }],
}

const login = ()=> {
    formDataRef.value.validate(async (valid) => {
      if (!valid) {
        return;
      }
      console.log("当前账号信息为：",fromData)
      if (fromData.checkCode !== "2378") {
        console.log("验证码输入错误")
        return;
      }
      if (fromData.account !== "123456") {
        console.log("账号输入错误")
        return;
      }
      if (fromData.password !== "123") {
        console.log("密码输入错误")
        return;
      }
      // 在登录成功时设置登录状态
      globalVariables.isLoggedIn = true
      // 登录成功后跳转home页面
      await router.push({name: '首 页'});
      console.log("登录成功！")
    })
}

</script>

<style lang="scss">
.login-body {
  width: 100%;
  height: calc(100vh);
  background-size: cover;
  background-position: center;
  background-image: url(@/assets/login/wukong.png);

  .login-panel {
    float: right;
    width: 350px;
    margin: 300px 100px 0 0;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 2px 2px 10px #ddd;
    background: rgba(255, 255, 255, 0.7);

    .login-title {
      font-size: 20px;
      font-weight: bold;
      text-align: center;
      margin-bottom: 10px;
    }

    .check-code-panel {
      width: 100%;
      display: flex;
      align-items: center;
      .input-panel {
        flex: 1;
        margin-right: 5px;
      }
      .check-code{
        width: 100px;
        border-radius: 3px;
      }
    }
  }
}

</style>
